<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>MarkerClusterer Example </title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript" src="data.json"></script>
    <script type="text/javascript" src="geoclusterer.js"></script>
    <script type="text/javascript">
	function initialize() {
		var myLatlng = new google.maps.LatLng(39.91, 116.38);
		var myOptions = {
			zoom: 2,
			center: myLatlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		}
		var map = new google.maps.Map(document.getElementById("map"), myOptions);
		var geoClusterer = new GeoClusterer(map);
		var listner = google.maps.event.addListener(map, "tilesloaded", function () {
			google.maps.event.removeListener(listner);
			var image = "http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png";
			var items = [];
			for (var i = 0; i < 100; ++i) {
				var item = {};
				// need to set item.lat, item.lng, item.latlng.
				item.lat = data.photos[i].latitude;
				item.lng = data.photos[i].longitude;
				item.latlng = new google.maps.LatLng(data.photos[i].latitude, data.photos[i].longitude);
				items.push(item);
			}
			geoClusterer.clear();
			geoClusterer.addItems(items);
		});
	}
    </script>
  </head>
  <body onload="initialize()">
    <h3>A simple example of MarkerClusterer (100 markers)</h3>
    <div id="map" style="width:600px;height:400px;"></div>
  </body>
</html>
